<template>
  <div>
    <el-card style="margin: 30px; text-align: center">
      <el-upload
        drag
        :action="postUrl"
        multiple
        :before-upload="uploadBefore"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-card>
    <!--
    <waterfall :col="colNum" :width="itemWidth" :gutter-width="gutterWidth" :watch="imgList" :data="imgList">
      <template>
        <div
          v-for="(item,index) in imgList"
          :key="index"
          style="width: 200px"
        >
          <el-card :body-style="{ padding: '10px' }">
            <el-image :src="prefix + item" alt="加载错误" fit="cover" />
            <div style="padding: 10px;text-align: center">
              <span>{{ item }}</span>
              <div>
                <el-button type="text" class="button">删除</el-button>
                <el-button type="text" class="button">复制</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </template>
    </waterfall>

  -->
    <div>
      <Waterfall
        :list="imgList"
        :gutter="10"
        :width="240"
        :breakpoints="{
          1200: { //当屏幕宽度小于等于1200
            rowPerView: 4,
          },
          800: { //当屏幕宽度小于等于800
            rowPerView: 3,
          },
          500: { //当屏幕宽度小于等于500
            rowPerView: 2,
          }
        }"
      >
        <template #item="{ item }">
          <el-card :body-style="{ padding: '10px' }">
            <el-image :src="prefix + item" alt="加载错误" fit="cover" />
            <el-divider />
            <div style="text-align: center">
              <span>{{ item }}</span>
              <div>
                <el-button type="text" class="button" @click="delImg(item)">删除</el-button>
                <el-button
                  v-clipboard:copy="prefix + item"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                  type="text"
                  class="button"
                >复制地址</el-button>
              </div>
            </div>
          </el-card>
        </template>
      </Waterfall>
    </div>
  </div>
</template>
<script>
import { delImg, getImgList } from '@/api/file'
import Waterfall from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin-test/dist/vue-waterfall-plugin.css'

export default {
  name: 'ImgArea',
  components: {
    Waterfall
  },
  data() {
    return {
      postUrl: process.env.VUE_APP_BASE_API + '/imgUpload',
      prefix: 'https://lsz-blog.oss-cn-beijing.aliyuncs.com/',
      imgList: []
    }
  },
  computed: {
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      getImgList().then(res => {
        this.imgList = res.data.list
      })
    },
    onCopy() {
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    },
    onError() {
      this.$message.error('复制失败')
    },
    async delImg(fileName) {
      try {
        await this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        })
        delImg(fileName).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.load()
        })
      } catch (e) {
        this.$message.info('已取消')
      }
    },
    uploadBefore(file) {
      const isImage = file.type.includes('image')
      if (!isImage) {
        this.$message.error('上传文件类型必须是图片!')
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isImage && isLt5M
    }
  }
}
</script>

<style scoped>

</style>
